header-padding-normal = 10px
header-padding-max = 30px
logo-size = 50px

#header
  position: relative
  padding: header-padding-normal 0
  @media print
    display: none

#header-inner
  display: flex
  flex-flow: row nowrap
  align-items: center
  @media mq-mobile
    justify-content: center

#logo-wrap
  flex: 0 logo-size
  width: auto
  height: logo-size

#logo
  hide-text()
  background: url("/SuperMap-iDesktop-Cross/logo.svg")
  width: logo-size
  height: logo-size
  background-size: @width @height
  display: block
  
#Productname
  padding-left: 20px
  display: none
  flex: 1 auto
  text-align: left
  padding-left: 10px
  color: #FFFFFF
  font-family: font-title
  font-size: 20px
  @media mq-normal
    display: block  

#main-nav
  display: none
  flex: 1 auto
  text-align: right
  padding-left: 20px
  @media mq-normal
    display: block

.main-nav-link
  color: #FFFFFF
  text-decoration: none
  line-height: logo-size
  transition: 0.2s
  font-family: font-title
  display: inline-block
  padding: 0 15px
  &:hover
    opacity: 1
    color: color-link-hover

#search-input-wrap
  display: none
  padding-left: 6px
  padding-bottom: 8px
  border-bottom: 1px solid color-gray
  &.on
    display: inline-block

#search-input-icon
  color: #FFFFFF
  padding-right: 0.5em
  display: inline-block


#search-input
  background: none
  font-size: inherit
  font-family: font-title
  color: #FFFFFF
  outline: none
  -webkit-appearance: none


.algolia-docsearch-suggestion {
  border-bottom-color: #3A3DD1;
}

.algolia-docsearch-suggestion--category-header {
  background-color: #4B54DE;
}

.algolia-docsearch-suggestion--highlight {
  color: #3A33D1;
}

.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight  {
  background-color: #4D47D5;
}

.aa-cursor .algolia-docsearch-suggestion--content {
  color: #272296;
}
.aa-cursor .algolia-docsearch-suggestion {
  background: #EBEBFB;
}


@media (min-width: 768px) {

  .algolia-docsearch-suggestion {
    border-bottom-color: #7671df;
  }

  .algolia-docsearch-suggestion--subcategory-column {
    border-right-color: #7671df;
    background-color: #F2F2FF;
    color: #4E4726;
  }
}
  
#lang-select-wrap
  display: none
  position: relative
  @media mq-normal
    display: block

#lang-select-label
  color: #fff
  opacity: 0.7
  font-family: font-title
  line-height: logo-size
  span
    padding-left: 8px
  i
    opacity: 0.7

#lang-select
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  -webkit-appearance: menulist-button
  font-size: inherit

